<template>
  <div class="setup">
    <h1 class="setup__title">
      <slot name="title">
        项目快速成型工具
      </slot>
    </h1>

    <h3 class="setup__description">
      <slot name="description">
        <div>MyWeb —— 为前端开发提供基于Vue项目的一站式解决方案。</div>
        <div class="setup__buttons">
          <el-button round type="success" icon="el-icon-video-play" @click="go('/my/guide/')">快速上手</el-button>
          <el-button round icon="el-icon-s-promotion" @click="go('https://gitee.com/newgateway/my',true)">代码仓库
          </el-button>
        </div>
      </slot>
    </h3>

    <div class="copyright">
      <slot name="setup__footer">
        <p>新德汇前端团队出品 @ 2020</p>
      </slot>
    </div>
  </div>
</template>

<script>

  export default {
    name: 'setup',
    methods: {
      go(url, isOpen = false) {
        if (isOpen) {
          window.open(url)
        } else {
          location.href = url
        }
      }
    }
  }
</script>

<style lang="scss" scoped>

  .setup {
    margin: auto;
    padding-top: 2rem;
    line-height: 2rem;
    text-align: center;
    color: #fff;
    position: relative;
    height: 100%;

    &__title {
      margin: 0;
    }

    &__descrition {
      margin: 1rem 0 1rem 0;
      padding: 1rem 0 0 0;
      color: #fff;
    }

    &__buttons {
      padding: 2rem 0 0 0;

      .el-button {
        margin: 0 1rem 1rem 1rem;
        zoom: 1.2;
      }
    }

    h1, h3 {

    }

    img {
      width: 100%;
    }

    .copyright {
      color: #888;
      position: absolute;
      left: 0;
      bottom: 0;
    }
  }

</style>

